<template>
	<view>
		<search></search>
		<suspension></suspension>
		<view class="banner">
			<swiper circular indicator-dots indicator-color="rgb(255,255,255,0.5)" 
			indicator-active-color="#fff" autoplay>
				
						<swiper-item v-for="item in tu" :key="item.id">
							<image :src="item.imageUrl"  mode="scaleToFill"></image>
						</swiper-item>
	
			
					
			</swiper>
			
		</view>
		
		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20" ></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper vertical autoplay interval="1500" duration="300" circular>
					<swiper-item v-for="item in 4" >
						<navigator url="/pages/notice/notice">
							最新公告
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="forward" size="20" color="#28b389"></uni-icons>
			</view>
		</view>
		
		<view class="select">
			<common-title>
				<template #name>每日推荐</template>
				<template #custom>
					<view class="date">
						<uni-icons type="calendar" size="18" color="#28b389"></uni-icons>
						<view class="text">
							<uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
						</view>
						
					</view>
				</template>
				
			</common-title>
			<view class="content">
				<scroll-view scroll-x  >
				
					<view class="box"  v-for="item in popularCourse" :key="item.id">	
						<image :src="item.cover" mode="aspectFill"  @click="goToCoureseDetail(item.id)"></image>
						<view class="overlay">
							<view class="watch">
								<uni-icons type="videocam" color="white" size="20" >
									<text style="font-size: 14px;">{{item.viewCount}}</text>
								</uni-icons>
							</view>
							<view class="lessons">
								<text>共{{item.lessonNum}}课时</text>
							</view>
						</view>
						<view class="msg">
							<text>{{item.title}}</text>
							<uni-icons type="locked-filled" size="15"  color="red" v-if="item.price!=0">{{item.price}}￥</uni-icons>
							<text v-else style="color: red;">免费观看</text>
						</view>
					</view>
					
				</scroll-view>
			</view>
			
			
		</view>
		
		<view class="theme">
				<common-title>
					<template #name>专区精选</template>
					<template #custom>
						<navigator url="/pages/class/class" open-type="reLaunch" class="more">More+</navigator>
					</template>
				</common-title>
				
				<view class="content">
					 <them-item v-for="item in zones" :key="item.id"  :item="item"></them-item>
					 <them-item :isMore="true"></them-item> 
				</view>
		</view>
		
		<view class="teach">
			<common-title>
				<template #name>金牌讲师</template>
				<template #custom>
					<navigator url="/pages/teacher/teacher" open-type="reLaunch" class="more">More+</navigator>
				</template>
			</common-title>
			
			<view class="content">
				 <teacher-item v-for="item in glodLecturer" :key="item.id" :item="item"></teacher-item>
				 <teacher-item :isMore="true"></teacher-item>
			</view>
		</view>
		
		
		<view class="foot"></view>
		
		
	</view>
</template>

<script setup>
	 import {apiGetCarousel,apiGetPopularCourse,apiGetZone,apiGetGoldLecturer} from '@/apis/index.js'
     import {updateCourseViewCount} from '@/apis/course.js'
	
	const courseVo=ref({
		 currentPage:1,
		 pageSize:5,
		 title:'',
	})
	
	const zoneVo=ref({
		 currentPage:1,
		 pageSize:5,
		 zoneName:'',
	})
	
	const teacherVo=ref({
		 currentPage:1,
		 pageSize:5,
		 zoneName:'',
	})
	
	const zones=ref([])		
		
	const popularCourse=ref([])
	
	const tu=ref([])
	
	const getTu=async ()=>{
		let res=await apiGetCarousel(1,5)
		tu.value=res.data.data.records	
	} 
	

	
	const getPourlarCourse=async ()=>{
		let res=await apiGetPopularCourse(courseVo.value)
		popularCourse.value=res.data.data.records
		console.log("======每日推荐==========")
		console.log(popularCourse.value);
	}  
	
	
	
	
	const getZone=async ()=>{
		let res=await apiGetZone(zoneVo.value)
		zones.value=res.data.data.records
		console.log("======专区精选==========")
		console.log(zones.value);
	}  
	
	const glodLecturer=ref([])
	const getGoldLecturer=async ()=>{
		let res=await apiGetGoldLecturer(teacherVo.value)
		glodLecturer.value=res.data.data.records
		console.log("======金牌讲师==========")
		console.log(res.data.data.records);
	}  
	
	const goToCoureseDetail=(id)=>{
		console.log("===============id==============");
		console.log(id);
		updateViewCount(id)
		uni.navigateTo({
			url:"/pages/course/course?id="+id
		})
	}
	
    const updateViewCount=async (id)=>{
		let res=await updateCourseViewCount(id)
		console.log("更新浏览量成功");
	}

	
	
	
	


	
	getTu()
	getPourlarCourse()
	getZone()
	getGoldLecturer()

	 
	
</script>

<style lang="scss">
	.banner{
		width: 5000rpx;
		padding:30rpx 10px;
		background-color: #fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
		swiper{
			width: 715rpx;
			height:340rpx;
			
				&-item{
					width: 100%;
					height: 100%;
					padding: 0px 2px;
					image{
						width: 98%;
						height: 100%;
						border-radius:10rpx;
					}
				}
			
		}
	}
	
	.notice{
		width:690rpx;
		height: 100rpx;
		background:#f9f9f9;
		margin:15rpx auto;
		border-radius: 80rpx;
		display: flex;
		.left{
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			:deep(){
				.uni-icons{
					color:$brand-theme-color !important;
				}
			}
			.text{
				color:$brand-theme-color;
				font-weight:600;
				font-size:28rpx;
			}	
		}
		.center{
			flex:1;
			margin: 30rpx 0rpx;
			
			swiper{
				height: 100%;
				&-item{
					height: 100%;
					font-size:30rpx;
					color:#666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				
			}
		}
		.right{
			width: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.select{
		padding-top:50rpx;
		.date{
			color:$brand-theme-color;
			display: flex;
			align-items:center;
			.text{
				margin-left:5rpx;
				
			}
		}
		.content{
			width: 720rpx;
			margin-left:30rpx;
			margin-top:30rpx;
			scroll-view{
				white-space:nowrap;
				.box{
					width: 400rpx;
					height: 400rpx;
					display:inline-block;
					margin-right:15rpx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
					
					}
					.overlay {
					  width: 100%;
					  position: absolute;
					  bottom: 10rpx; 
					  background-color: rgba(0, 0, 0, 0.5); 
					  padding: 5rpx 10rpx;
					  border-radius: 5rpx;
					  color: white;
					  display: flex;
					  align-items: center;
					 .watch{
					  	  display: flex;
					  	  align-items: center;
						  
					  } 
					  .lessons {
					    margin-left: 150rpx; 
					  }
					}
					
					.msg{
						width: 100%;
						text{
							margin: 5rpx;
							
						}
						.uni-icons{
							
							margin:10rpx;
							margin-left: 120rpx; 
						}
						
		
						
						
					}
					
					
				}
			}
		}
	}
		
	.theme{
		padding:50rpx,0rpx;
		padding-top:20rpx;
		.more{
			font-size: 32rpx;
			color: #888;
		}
		.content{
			margin-top: 30rpx;
			padding: 0 30rpx;
			display: grid;
			gap: 15rpx;
			grid-template-columns:repeat(3,1fr);
		}
	}
	
	
	.teach{
		padding-top:50rpx;
		.more{
			font-size: 32rpx;
			color: #888;
		}
		.content{
			margin-top: 30rpx;
			padding: 0 30rpx;
			display: grid;
			gap: 15rpx;
			grid-template-columns:repeat(3,1fr);
		}
	}	
	
	
	.foot{
		width: 100%;
		height: 100rpx;
	
	}
	
	

</style>
